<template>
  <div>
    <draggable :list="msgList" @update="datadragEnd" :options="{animation:500}">
      <!-- <transition-group type="transition"> -->
        <li v-for="item in msgList" :key="item">{{item}}</li>
      <!-- </transition-group> -->
    </draggable>
    <br>
    <draggable :list="objList">
        <li v-for="item in objList" :key="item.name">{{item.name}}</li>
    </draggable>
  </div>
</template>
<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      msgList: ['A', 'B', 'C'],
      objList: [
        {name: 'obj_A', age: 18},
        {name: 'obj_B', age: 18},
        {name: 'obj_c', age: 18}
      ]
    }
  },
  methods: {
    datadragEnd() {
    }
  }
}
</script>
